<template>
	<div>
		<!-- xpert导航栏 -->
		<xpertNavBar :statusTab="statusTab" />
		<div style="height: 150px; width: 100%" class=""></div>
		<!-- Notifications -->
		<!-- form -->
		<div class="f f-j-b m1280">
			<div class="lefAva">
				<div class="avas">My profile</div>
				<div class="avasImg"><img src="/src/assets/tou.png" alt="" /></div>
				<!-- edit -->
				<div class="edit">Edit</div>
				<div class="edCon">Image must be .jpg or .png with minimum size of 160x160 pixels.</div>
			</div>
			<div class="form">
				<div class="account">My account</div>
				<!-- 表单============================================================================ -->
				<div class="formFrom">
					<div class="nameForm m-b-30 f f-a-c f-j-b">
						<div class="lefName">
							<div class="name f f-a-c">First name <span>*</span></div>
							<input type="text" class="inps" v-model="form.firstName" placeholder="" name="" id="" />
						</div>
						<div class="lefName">
							<div class="name f f-a-c">Last name <span>*</span></div>
							<input type="text" class="inps" v-model="form.lastName" placeholder="" name="" id="" />
						</div>
					</div>
					<!-- 姓名 -->
					<div class="nameForm m-b-30 f f-a-c f-j-b">
						<div class="lefName">
							<div class="name f f-a-c">Username <span>*</span> <img style="width: 14px; height: 14px; margin-left: 10px" src="/src/assets/user/wen.png" alt="" /></div>
							<input type="text" class="inps" v-model="form.userName" placeholder="" name="" id="" />
						</div>
						<div class="lefName">
							<div class="name f f-a-c">Date of Birth <span>*</span><img style="width: 14px; height: 14px; margin-left: 10px" src="/src/assets/user/wen.png" alt="" /></div>
							<input type="text" class="inps" v-model="form.dateOfBirth" placeholder="MM/DD/YY" name="" id="" />
						</div>
					</div>
					<!-- 性别 -->
					<div class="nameForm m-b-30 f f-a-c f-j-b">
						<div class="lefName">
							<div class="name f f-a-c">Gender <span>*</span><img style="width: 14px; height: 14px; margin-left: 10px" src="/src/assets/user/wen.png" alt="" /></div>
							<!-- <input type="text" class="inps" v-model="form.userName" placeholder="" name="" id="" /> -->
							<el-select v-model="form.gender" placeholder="Select option" size="large" style="width: 100%">
								<el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
							</el-select>
						</div>
						<div class="lefName">
							<div class="name f f-a-c">Language <span>*</span><img style="width: 14px; height: 14px; margin-left: 10px" src="/src/assets/user/wen.png" alt="" /></div>
							<!-- <input type="text" class="inps" v-model="form.dateOfBirth" placeholder="MM/DD/YY" name="" id="" /> -->
							<!-- <el-select v-model="form.language" placeholder="Select option" size="large" style="width: 100%">
								<el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
							</el-select> -->
							<el-select v-model="form.language" size="large" multiple placeholder="Select option" style="width: 100%">
								<el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
							</el-select>
						</div>
					</div>
					<!-- 邮箱 -->
					<div class="nameForm m-b-30 f f-a-c f-j-b">
						<div class="lefName">
							<div class="name f f-a-c">Email <span>*</span></div>
							<input type="text" class="inps" v-model="form.email" placeholder="" name="" id="" />
						</div>
						<div class="lefName">
							<div class="name f f-a-c">Phone number <span>*</span></div>
							<input type="text" class="inps" v-model="form.phoneNumber" placeholder="" name="" id="" />
						</div>
					</div>
					<!-- 地址-->
					<div class="nameForms m-b-30 f f-j-b">
						<div class="lefName">
							<div class="name f f-a-c">Location <span>*</span></div>
							<el-select v-model="form.country" placeholder="Country" size="large" style="width: 100%">
								<el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
							</el-select>
						</div>
						<div class="lefName">
							<!-- <div class="name f f-a-c"></div> -->
							<el-select v-model="form.state" placeholder="State" size="large" style="width: 100%">
								<el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
							</el-select>
						</div>
						<div class="lefName">
							<!-- <div class="name f f-a-c"></div> -->
							<el-select v-model="form.city" placeholder="City" size="large" style="width: 100%">
								<el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
							</el-select>
						</div>
					</div>
					<!-- Sector -->
					<div class="nameForm m-b-30 f f-a-c f-j-b">
						<div class="lefName">
							<div class="name f f-a-c">Sector <span>*</span></div>
							<!-- <input type="text" class="inps" v-model="form.userName" placeholder="" name="" id="" /> -->
							<el-select v-model="form.sector" placeholder="Select option" size="large" style="width: 100%">
								<el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
							</el-select>
						</div>
						<div class="lefName">
							<div class="name f f-a-c">Industry <span>*</span></div>
							<!-- <input type="text" class="inps" v-model="form.dateOfBirth" placeholder="MM/DD/YY" name="" id="" /> -->
							<el-select v-model="form.industry" placeholder="Select option" size="large" style="width: 100%">
								<el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
							</el-select>
						</div>
					</div>
					<div class="inpName">
						<div class="name f f-a-c">Title <span>*</span></div>
						<input type="text" class="inps" v-model="form.title" placeholder="" name="" id="" />
					</div>
					<!-- Say something about yourself  -->
					<div class="nameForm m-b-30 f f-a-c f-j-b">
						<div style="width: 100%" class="lefName">
							<div class="name f f-a-c">Say something about yourself <span>*</span></div>
							<a-textarea v-model:value="value2" class="textarea" placeholder="Introduce yourself with 15 characters minimum." :auto-size="{ minRows: 2, maxRows: 5 }" />
						</div>
					</div>
					<!-- topic -->
					<div style="margin-top: 80px" class="nameForm m-b-30 f f-a-c f-j-b">
						<div style="width: 100%" class="lefName">
							<div class="name f f-a-c">Topic<span>*</span></div>
							<el-select v-model="form.topic" size="large" multiple placeholder="" style="width: 100%">
								<el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
							</el-select>
						</div>
					</div>
					<!-- 下面的加减 -->
					<div class="work">
						<div class="workTit f f-a-c f-j-b">
							<div class="name f f-a-c">Work experience <span>*</span></div>
							<div @click="clickJia" class="rigwork hand">+</div>
						</div>
						<!-- Work experience  -->
						<div v-for="(item, index) in form.workList" :key="index" class="workInp f f-a-c f-j-b">
							<div class="inpBox">
								<input type="text" v-model="form.workList.company" class="inps" placeholder="Company" name="" id="" />
							</div>
							<div class="inpBox">
								<input type="text" v-model="form.workList.position" class="inps" placeholder="Position" name="" id="" />
							</div>
							<div class="inpBox">
								<input type="text" v-model="form.workList.time" class="inps" placeholder="Time" name="" id="" />
							</div>
							<div class="inpBox">
								<input type="text" v-model="form.workList.location" class="inps" placeholder="Location" name="" id="" />
							</div>
							<div @click="clickX(item, index)" class="x hand">x</div>
						</div>
						<!-- Upload a file or link  -->
						<!-- <div class="link hand f f-a-c">
							<img src="/src/assets/user/link.png" class="linkImg" alt="" />
							<div class="linkCon">Upload a file or link</div>
						</div> -->
					</div>
					<!-- 下面的加减 -->
					<div class="work m-t-30">
						<div class="workTit f f-a-c f-j-b">
							<div class="name f f-a-c">Education experience <span>*</span><img style="width: 14px; height: 14px; margin-left: 10px" src="/src/assets/user/wen.png" alt="" /></div>
							<div @click="clickJiaWork" class="rigwork hand">+</div>
						</div>
						<!-- Work experience  -->
						<div v-for="(item, index) in form.educationList" :key="index" class="workInp f f-a-c f-j-b">
							<div class="inpBoxs">
								<input type="text" class="inps" v-model="form.educationList.school" placeholder="School" name="" id="" />
							</div>
							<div class="inpBoxs">
								<input type="text" class="inps" v-model="form.educationList.degree" placeholder="Degree" name="" id="" />
							</div>
							<div class="inpBoxs">
								<input type="text" class="inps" v-model="form.educationList.fieldOfStudy" placeholder="Field of study" name="" id="" />
							</div>

							<div @click="clickXWork(item, index)" class="x hand">x</div>
						</div>
						<!-- Upload a file or link  -->
						<!-- <div class="link hand f f-a-c">
							<img src="/src/assets/user/link.png" class="linkImg" alt="" />
							<div class="linkCon">Upload a file or link</div>
						</div> -->
					</div>
					<!-- 下面的上传 -->
					<!-- <div class="work" style="margin-top: 40px">
						<div class="workTit f f-a-c f-j-b">
							<div class="name f f-a-c">Certificate <img class="hand" style="width: 14px; height: 14px; margin-left: 10px" src="/src/assets/user/wen.png" alt="" /></div>
						</div>
						<div>
							<div class="upLoad">
								<el-upload
									v-model:file-list="form.fileList"
									action="https://run.mocky.io/v3/9d059bf9-4660-45f2-925d-ce80ad6c4d15"
									list-type="picture-card"
									:on-preview="handlePictureCardPreview"
									:on-progress="progress"
									:on-success="success"
									:on-remove="handleRemove">
									<el-icon><Plus /></el-icon>
								</el-upload>
							</div>
						</div>
					</div> -->
					<div style="margin-top: 60px" class="btn f f-a-c">
						<div class="submit hand">Save</div>
					</div>
				</div>
			</div>
		</div>

		<xpertTabbar />
	</div>
</template>

<script setup>
	import { ref, onMounted, reactive } from "vue";
	import { Plus } from "@element-plus/icons-vue";
	import { useRoute } from "vue-router";
	import xpertTabbar from "@/components/tabBar/xpertTabbar.vue";
	import xpertNavBar from "@/components/navBar/xpertNavBar.vue";
	import router from "@/router/index.js";
	import ButtonDiffuse from "@/components/Button/ButtonDiffuse.vue";
	let statusTab = ref(1);
	let num = ref(4);
	const value = ref("");
	let route = useRoute();
	// 获取路由传过来的参数id==2时显示步骤条隐藏上方说明
	let id = route.query.id;
	const options = [
		{
			value: "Option1",
			label: "Option1"
		},
		{
			value: "Option2",
			label: "Option2"
		},
		{
			value: "Option3",
			label: "Option3"
		},
		{
			value: "Option4",
			label: "Option4"
		}
	];
	onMounted(() => {
		window.addEventListener("scroll", handleScroll);
	});
	let form = reactive({
		firstName: "",
		lastName: "",
		userName: "",
		dateOfBirth: "",
		gender: "",
		language: [],
		email: "",
		title: "",
		phoneNumber: "",
		city: "",
		state: "",
		country: "",
		industry: "",
		sector: "",
		topic: [],
		fileList: [],
		workList: [
			{
				company: "",
				position: "",
				time: "",
				location: ""
			}
		],
		educationList: [
			{
				school: "",
				degree: "",
				fieldOfStudy: ""
			}
		]
	});
	// 点击差删除
	const clickX = (item, index) => {
		console.log(item, index);
		form.workList = form.workList.filter((item, ind) => index != ind);
	};
	// 点击加
	const clickJia = () => {
		form.workList.push({
			company: "",
			position: "",
			time: "",
			location: ""
		});
	};
	// 点击差删除
	const clickXWork = (item, index) => {
		console.log(item, index);
		form.educationList = form.educationList.filter((item, ind) => index != ind);
	};
	// 点击加
	const clickJiaWork = () => {
		form.educationList.push({
			company: "",
			position: "",
			time: "",
			location: ""
		});
	};
	// 点击文件列表中已上传的文件时的钩子
	const handlePictureCardPreview = (e, s) => {};
	// 移除时的钩子
	const handleRemove = (e, s) => {};
	// 上传时的钩子
	const progress = (e, s) => {};
	// 上传成功时的钩子
	const success = (e, s) => {};
	// 这个是当头部导航栏滑倒下面时给tabr加个背景
	const handleScroll = () => {
		const scrollTop = document.documentElement.scrollTop;
		if (scrollTop > 0) {
			statusTab.value = 2;
		} else {
			statusTab.value = 1;
		}
	};
</script>
<style scoped>
	@import "./index.scss";
</style>
